<template>
	<view>
		<view class="nav">
			<u-tabs :current="check - 1" :itemStyle="{ width:'50%',height:'80rpx'}"
				:activeStyle="{ color: '#E84E22' , fontSize:'32rpx' }" lineColor='#E84E22'
				:inactiveStyle="{ color: '#666666',fontSize: '28rpx' }" :list="list1" @click="click"></u-tabs>
		</view>
		<view v-if="showMeal">
			<view class="topBox">
				<view class="topBoxCont">
					<view class="topL">
						<view class="topLtit">
							{{data.packages.name}}
						</view>
						<view class="topPrice">
							￥{{(data.packages.price/100).toFixed(2)}}
						</view>
					</view>
					<view class="topR">
						<view class="topRt">
							<view class="rtOne">
								酒{{data.packages.num}}瓶
							</view>
							<view class="rtTow">
								(内涵)
							</view>
						</view>
						<view class="topRcon" v-for="(item,index) in data.packages.infos" :key="index">
							{{item.name}}:{{item.num}}瓶;
						</view>
					</view>
				</view>
			</view>
			<view class="bigBox">
				<view class="orderNo">
					订单编号：{{data.orderNo}}
				</view>
				<!-- <view class="mealInfo">
					<view class="mealName">
						套餐一
					</view>
					<view class="mealDete">
						<text class="data1">酒12瓶</text><text class="data2">(含分类一60瓶+分类二60瓶)</text><text
							class="data3">￥3600.00</text>
					</view>
				</view> -->
				<view class="payBox">
					<view class="payLi">
						<view class="payLiL">
							实付金额
						</view>
						<view class="payLiR">
							￥{{(data.price/100).toFixed(2)}}
						</view>
					</view>
					<view class="payLi">
						<view class="payLiL">
							购买套餐
						</view>
						<view class="payLiR">
							{{data.packages.name}}
						</view>
					</view>
					<view class="payLi">
						<view class="payLiL">
							获得库存
						</view>
						<view class="payLiR">
							{{data.packages.num}}瓶
						</view>
					</view>
					<view class="payLi">
						<view class="payLiL">
							支付方式
						</view>
						<view class="payLiR">
							微信支付
						</view>
					</view>
					<view class="payLi">
						<view class="payLiL">
							下单时间
						</view>
						<view class="payLiR">
							{{parseTime(data.successTime)}}
						</view>
					</view>
				</view>
			</view>
			<view class="bigBox">
				<view class="orderNo">
					库存信息
				</view>
				<view class="payBox">
					<view class="payLi">
						<view class="payLiL">
							套餐总量
						</view>
						<view class="payLiR">
							{{data.packages.num}}
						</view>
					</view>
					<view class="payLi">
						<view class="payLiL">
							剩余库存
						</view>
						<view class="payLiR redTxt">
							{{data.packageStock[0].num}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="listBox" v-else>
			<view class="bigBox" v-for="(item,index) in list" :key="index">
				<view class="payBox">
					<view class="payLi2">
						<view class="payLiL">
							订单编号
						</view>
						<view class="redTxt">
							{{item.no}}
						</view>
					</view>
					<view class="payLi2">
						<view class="payLiL">
							下单时间
						</view>
						<view class="redTxt">
							{{parseTime(item.createTime)}}
						</view>
					</view>
					<view class="payLi2" @click="checkId(item.id)">
						<view class="payLiL">
							抵扣瓶数
						</view>
						<view class="redTxt">
							{{item.num}}瓶   <u-icon name="arrow-up" v-if="item.id == checkid"></u-icon> <u-icon name="arrow-down" v-else></u-icon>
						</view>
					</view>
					<view class="addInfo" v-if="item.id == checkid">
						<view class="pagesInfo">
							<view class="pagesLi" v-for="(item2,index2) in item.packageDeductionList" :key="index2">
								<view class="pagesLiMin">
									{{item2.name}}
								</view>
								<view class="pagesLiMin2">
									{{item2.num}}瓶
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import time from '@/components/time/time.js';
	import {
		parseTime
	} from "@/utils/ruoyi"
	import {
		deductionList
	} from '@/api/package/package.js'
	export default {
		name: 'myMeal',
		props: ['data'],
		data() {
			return {
				check: 1,
				list1: [{
					name: '我的套餐',
					type: 1
				}, {
					name: '抵扣记录',
					type: 2
				}],
				pageNum: 1,
				list: [],
				listnum: 0,
				showMeal: true,
				checkid:'',
			}
		},
		methods: {
			parseTime(time) {
				return parseTime(time)
			},
			getData() {
				let that = this
				uni.showLoading({
					title: "加载中",
					mask: true
				})
				deductionList().then(response => {
					uni.hideLoading()
					console.log('套餐', response)
					// if (that.list.length < response.data.total) {
					// that.list = that.list.concat(res.data.rows)
					that.list = response.data
					// }
				})
			},
			click(item) {
				this.check = item.type
				if (item.type == 1) {
					this.pageNum = 1
					this.list = []
					this.listnum = 0
					this.showMeal = true
				} else {
					this.status = 0
					this.pageNum = 1
					this.listnum = 0
					this.list = []
					this.getData()
					this.showMeal = false
				}
			},
			checkId(e){
				if(this.checkid == e){
					this.checkid = ''
				}else{
					this.checkid = e
				}
			}
		}
	}
</script>

<style>
	.nav {
		width: 750rpx;
		height: 100rpx;
		background-color: white;
		border-top: 2rpx solid #F1F1F1;
		position: fixed;
		top: 0;
		z-index: 1;
	}

	.topBox {
		width: 690rpx;
		/* height: 276rpx; */
		background: #E84E22;
		border-radius: 20rpx;
		margin: 120rpx auto 0 auto;
		padding: 30rpx 0;
	}

	.topBoxCont {
		width: 630rpx;
		/* height: 216rpx; */
		margin: 30rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: white;
		text-align: center;
		overflow: hidden;
		/* background-color: #F1F1F1; */
	}

	.topL {
		width: 300rpx;
		height: fit-content;
	}

	.topLtit {
		width: 300rpx;
		height: 80rpx;
		line-height: 150rpx;
		font-size: 24rpx;
		text-align: center;
	}

	.topPrice {
		width: 300rpx;
		height: 100rpx;
		line-height: 100rpx;
		font-weight: bold;
		font-size: 40rpx;
	}

	.topR {
		width: 300rpx;
		/* height: 174rpx; */
		/* margin-top: 40rpx; */
		/* background-color: green; */
	}

	.topRt {
		width: 300rpx;
		height: 80rpx;
	}

	.rtOne {
		width: 300rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-weight: bold;
		font-size: 28rpx;
	}

	.rtTow {
		width: 300rpx;
		height: 30rpx;
		line-height: 30rpx;
		font-size: 24rpx;
	}

	.topRcon {
		width: 300rpx;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 24rpx;
	}

	.bigBox {
		width: 690rpx;
		/* height: 818rpx; */
		margin: 20rpx auto 0 auto;
		background: #FFFFFF;
		border-radius: 20rpx;
		/* padding-bottom: 30rpx; */
	}

	.orderNo {
		width: 630rpx;
		height: 100rpx;
		margin: 0 auto;
		line-height: 100rpx;
		border-bottom: 2rpx solid #F1F1F1;
		font-size: 28rpx;
		color: #333333;
	}

	.mealInfo {
		width: 630rpx;
		height: 164rpx;
		background: #F5F5F5;
		border-radius: 20rpx;
		margin: 30rpx auto;
		overflow: hidden;
	}

	.mealName {
		width: 570rpx;
		height: 34rpx;
		line-height: 34rpx;
		margin: 40rpx auto 0 auto;
		font-size: 24rpx;
		color: #999999;
	}

	.mealDete {
		width: 570rpx;
		height: 56rpx;
		line-height: 56rpx;
		margin: 0 auto;
		color: #333333;
	}

	.data1 {
		font-weight: bold;
		font-size: 28rpx;
	}

	.data2 {
		font-weight: bold;
		font-size: 20rpx;
		color: #999999;
		margin: 0 10rpx;
	}

	.data3 {
		font-weight: bold;
		font-size: 28rpx;
		font-weight: bold;
		font-size: 40rpx;
	}

	.payBox {
		width: 630rpx;
		/* height: 286rpx; */
		/* background-color: red; */
		/* border-bottom: 2rpx solid #F1F1F1; */
		/* border-top: 2rpx solid #F1F1F1;	 */
		margin: 30rpx auto 0 auto;
	}

	.payLi {
		width: 630rpx;
		height: 71.5rpx;
		line-height: 71.5rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		color: #333333;
	}

.payLi2 {
		width: 630rpx;
		height: 71.5rpx;
		line-height: 71.5rpx;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #333333;
	}
	.payLiL {
		width: fit-content;
		height: 71.5rpx;
	}

	.payLiR {
		width: 260rpx;
		height: 71.5rpx;
		text-align: end;
	}

	.redTxt {
		width: fit-content;
		height: 71.5rpx;
		line-height: 71.5rpx;
		margin-left: 30rpx;
		display: flex;
	}

	.deleBox {
		width: 630rpx;
		height: 60rpx;
		margin-top: 50rpx;
		line-height: 60rpx;
		display: flex;
		justify-content: flex-end;
		margin: 30rpx auto 0 auto;
	}

	.dele {
		width: 140rpx;
		height: 60rpx;
		text-align: center;
		border: 2rpx solid #999999;
		border-radius: 28rpx;
		font-size: 24rpx;
		color: #999999;
	}

	.listBox {
		margin-top: 120rpx;
		/* background-color: white; */
	}

	.ul {
		width: 690rpx;
		height: 102rpx;
		border-bottom: 2rpx solid #F5F5F5;
		margin: 0 auto;
	}

	.li {
		width: 630rpx;
		height: 102rpx;
		margin: 0 auto;
		display: flex;
	}

	.liTime {
		width: 40%;
		height: 102rpx;
		line-height: 102rpx;
		text-align: center;
		font-size: 28rpx;
		color: #333333;
	}

	.liImg {
		width: 15rpx;
		height: 24rpx;
		display: block;
		margin-left: 10rpx;
		transform: rotate(90deg);
	}

	.liPrice {
		width: 40%;
		height: 102rpx;
		line-height: 102rpx;
		text-align: center;
		font-size: 24rpx;
	}

	.other {
		width: 750rpx;
		height: 30rpx;
		line-height: 30rpx;
		font-size: 20rpx;
		color: #999999;
		margin-top: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.txt {
		width: 20%;
		text-align: center;
		height: 102rpx;
		line-height: 102rpx;
	}

	.txt1 {
		max-width: 250rpx;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*禁止换行*/
		text-overflow: ellipsis;
		/*省略号*/
		margin-right: 10rpx;
	}
	/* 添加信息 */
	.addInfo{
		width: 630rpx;
		height: fit-content;
		/* height: 200rpx; */
		border-top: 1rpx solid #999999;
		padding-bottom: 30rpx;
	}
	.pagesInfo{
		width: 630rpx;
		height: fit-content;
		margin-top: 20rpx;
		border: 1rpx solid #999999;
		border-radius: 20rpx;
	}
	.pagesLi{
		width: 630rpx;
		height: 70rpx;
		line-height: 70rpx;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		border-bottom: 1rpx solid #999999;
	}
	.pagesLi:last-child{
		border-bottom: none;
	}
	.pagesLiMin{
		width: 480rpx;
		height: 70rpx;
		border-right: 1rpx solid #999999;
		text-align: center;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*禁止换行*/
		text-overflow: ellipsis;
		/*省略号*/
	}
	.pagesLiMin2{
		width: 150rpx;
		height: 70rpx;
		text-align: center;
	}
</style>